<template>
  <div class="monitor-blk" ref="monitorBlk">
    <div class="video-list flex wrap" v-if="videoList.length > 0">
      <div
        v-if="videoList.length == 1"
        class="flex-1"
        :style="{
          width: videoWidth + 'px',
          height: videoHeight + 'px',
        }"
      >
        <livePlayer
          v-for="(item, index) in videoList"
          :key="index"
          :options="item"
          :initRender="true"
        ></livePlayer>
      </div>
      <template v-else-if="videoList.length > 1">
        <div
          class="video-item"
          v-for="(item, index) in videoList"
          :key="index"
          :style="{
            width: videoWidth / 2 + 'px',
            height: videoHeight / 2 + 'px',
          }"
        >
          <livePlayer
            :src="item"
            :index="index"
            :options="item"
            :initRender="true"
          ></livePlayer>
        </div>
      </template>
    </div>
    <p class="data-none" v-else-if="!loading">暂无监控视频</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
import livePlayer from "@/components/screenVideoPlayer/player";
export default {
  name: "SmokeAlarmModal",
  components: { livePlayer },
  props: {
    monitorList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapState(["scale", "winSize"]),
    planHeight() {
      if (this.isZoomIn) {
        return this.winSize.winH * 0.8;
      } else {
        return 400 * this.scale;
      }
    },
  },
  data() {
    return {
      videoWidth: 100,
      videoHeight: 100,
      currentWinId: 0,
      totalWin: 16,
      isZoomIn: false,
      videoList: [],
      loading: false,
      productId: "",
    };
  },
  created() {
    // console.log("12121")
    // console.log(this.planeGraphDetail)
    console.log(this.monitorList,1324);
  },

  mounted() {
    this.$nextTick(() => {
      this.videoWidth = this.$refs.monitorBlk.clientWidth;
      this.videoHeight = (this.videoWidth * 9) / 16;
      if (this.monitorList.length > 0&&!this.monitorList[0].playType) {
        // this.initControl()
        this.getVideoList();
      }else{
        this.videoList=[]
        this.monitorList.forEach(item=>{
          this.productId=item.productId
          this.videoList.push(
              this.formatVideoOptions(
                item.src,
                item.playType,
                item.number
              )
            );
        })
      }
    });
  },
  methods: {
    formatVideoOptions(url, playType, number) {
      const typeMap = this.config.videoTypeMap;
      const options = {
        playType,
        sources: [
          {
            src: url,
            type: typeMap[playType],
          },
        ],
        number,
        productId: this.productId || "",
      };
      return options;
    },
    getVideoList() {
      this.videoList = [];
      this.monitorList.forEach((item) => {
        console.log(item.deviceId);
        this.getCameraDetail(item.deviceId, item.cameraNumber);
      });
    },
    getCameraDetail(id, number) {
      this.loading = true;
      this.$get("/fireFightingIOT/device/detail", {
        deviceClassify: "3",
        number,
        id: "",
      }).then(
        (res) => {
          this.loading = false;
          let deviceDetail = res.data;
          this.productId = deviceDetail.productId;
          if (deviceDetail.videoplayAddr) {
            this.videoList.push(
              this.formatVideoOptions(
                deviceDetail.videoplayAddr,
                deviceDetail.playType,
                number
              )
            );
          } else if (deviceDetail.videoplayAddrList.length > 0) {
            this.videoList = deviceDetail.videoplayAddrList.map((item) => {
              return this.formatVideoOptions(
                item,
                deviceDetail.playType,
                number
              );
            });
          } else {
            this.getVideoStream(number, deviceDetail.playType);
          }
        },
        (err) => {
          this.loading = true;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getVideoStream(number, playType) {
      this.$get("/fireFightingIOT/device/getVideoStream", { number })
        .then((res) => {
          if (res.data) {
            this.videoList.push(
              this.formatVideoOptions(res.data, playType, number)
            );
          }
        })
        .catch((err) => {
          this.$message.error(err.msg || "系统错误");
        });
    },
    zoomInAction() {
      this.isZoomIn = true;
      // this.clearVideo()
      this.$nextTick(() => {
        this.$refs.floorMarker.computeSize();
      });
    },
    zoomOutAction() {
      this.isZoomIn = false;
      this.initControl();
      this.$nextTick(() => {
        this.$refs.floorMarker.computeSize();
      });
    },
    closeAction() {
      // this.clearVideo()
      this.$emit("update:visible", false);
    },
    clearVideo() {
      if (oWebControl) {
        oWebControl.JS_HideWnd();
        oWebControl.JS_Disconnect();
      }
    },
    startPreview(cameraIndexCode) {
      var cameraIndexCode = cameraIndexCode; //获取输入的监控点编号值，必填
      var streamMode = 0; //主子码流标识：0-主码流，1-子码流
      var transMode = 1; //传输协议：0-UDP，1-TCP
      var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
      // var wndId = winId || -1 //播放窗口序号（在2x2以上布局下可指定播放窗口）

      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

      oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          // wndId: wndId, //可指定播放窗口
        }),
      });
    },
    initControl() {
      const monitorNumber = this.monitorList.length;
      let layout = "1x1";
      if (monitorNumber == 2) {
        layout = "1x2";
      } else if (monitorNumber == 3) {
        layout = "1+2";
      } else if (monitorNumber == 4) {
        layout = "2x2";
      }
      this.initVideoWebPlugin(
        {
          containerId: "videoControl",
          width: this.videoWidth,
          height: this.videoHeight,
          layout: layout,
        },
        () => {
          this.monitorList.forEach((item) => {
            this.startPreview(item.cameraNumber);
          });
          // this.startPreview(this.number)
        }
      );
    },
  },
};
</script>

<style></style>
